import styles from './index.less';
import { useState, useEffect } from 'react';
import { history } from 'umi';
import { connect } from 'dva'
import { Card } from 'antd';
import { IappObj } from '@/types/common';
import { getAppSearch } from '@/servers/common';
const { Grid } = Card;
import umiImg from '@/assets/app/umi.png';
import reactImg from '@/assets/app/react.png';
import vueViteImg from '@/assets/app/vue-vite.png';
import vueImg from '@/assets/app/vue.png';

const Index = (props: any) => {
  const [appList, setAppLsit] = useState<IappObj[]>([]);

  useEffect(() => {
    getAppSearchFn();
  }, [])

  // 查询所有应用信息
  const getAppSearchFn = async () => {
    const res = await getAppSearch({});
    setAppLsit(res.data);
  }

  /**
   * 进入应用
   * @param item 应用对象数据
   */
  const goApp = (item: IappObj) => {
    // 通过dispatch 调用文件下的save 改变dva 下 system 的 state的状态值
    props.dispatch({
      type: 'common/save',
      payload: {
        presentApp: item
      }
    })

    history.push(item.path);
  }

  /**
   * 图标
   * @param type 类型 
   */
  const imgsApp = (type: string) => {
    const objs = {
      'umi': umiImg,
      'react': reactImg,
      'vue-vite': vueViteImg,
      'vue': vueImg,
    }
    return objs[type];
  }

  return (
    <div className='homeBox'>
      <Card title="我的应用">
        {
          appList.map((item: IappObj, index) => {
            return (
              <Grid key={index}>
                <div style={{ 'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between' }}>
                  <div>
                    <p className={styles['homeBox-appName']}>应用名称：{item.title}</p>
                    <p>应用地址：{item.url}</p>
                  </div>
                  {
                    item.type && (
                      <div>
                        <img className={styles['homeBox-appImg']} src={ imgsApp(item.type)} />
                      </div>
                    )
                  }

                </div>
                <span className={styles['homeBox-goApp']} onClick={goApp.bind(this, item)}>进入应用</span>
              </Grid>
              // <div key = { index } className={styles.content}>
              //   <p className={ styles['homeBox-appName'] }>应用名称：{ item.title }</p>
              //   <p>应用地址：{ item.url }</p>
              //   <span className={ styles['homeBox-goApp'] } onClick = { goApp.bind(this, item) }>进入应用</span>
              // </div>
            )
          })
        }
      </Card>
    </div>
  )
}

export default connect(({ common }: any) => ({ common }))(Index);;
